<template>
  <div class="container">
    <div class="header">
      <div class="search-container">
        <span class="iconfont">&#xe65c;</span>
        <input type="text" class="bar" placeholder="搜索图书名称" :value="this.word" auto-focus="true">
        <span class="iconfont" @click="onDelete">&#xe658;</span>
      </div>
      <div class="cancel" @click="onCancel">取消</div>
    </div>
    <div v-show="!this.searching">
      <div class="history">
        <div class="title">
          <div class="chunk"></div>
          <span>历史搜索</span>
        </div>
        <div class="tags">
          <div class="tags-item" v-for="(item, index) in this.historyWords" :key="index">
            <book-tag :text="item" @tapping="onConfirm" />
          </div>
        </div>
      </div>
      <div class="history hot-search">
        <div class="title">
          <div class="chunk"></div>
          <span>热门搜索</span>
        </div>
        <div class="tags">
          <div class="tags-item" v-for="(item, index) in this.hotWords" :key="index">
            <book-tag :text="item" @tapping="onConfirm" />
          </div>
        </div>
      </div>
    </div>
    <div class="books-container"  v-show="this.searching">
      <div v-for="item in this.dataArray" :key="item.id">
        <book-item class="items" :books="item"/>
      </div>
    </div>
    <span v-show="this.noneResult" class="empty-tip">没有搜索到书籍</span>
  </div>
</template>

<script>
import BookItem from 'components/bookItem/BookItem'
import BookTag from 'components/bookTag/BookTag'
import {KeyWordModel} from '../../models/key-word'
import {BookModel} from '../../models/book'
import {Indicator} from 'mint-ui'
const keyWordModel = new KeyWordModel()
const bookModel = new BookModel()
export default {
  name: 'BookSearch',
  components: {
    BookItem,
    BookTag
  },
  data () {
    return {
      searching: false,
      historyWords: [],
      hotWords: [],
      dataArray: [],
      word: '',
      noneResult: false,
      total: null,
      loading: false
    }
  },
  methods: {
    onCancel () {
      this.$emit('cancel')
      this.$_initialize()
      Indicator.close()
    },
    onDelete () {
      this.$_hideResult()
      this.$_initialize()
      Indicator.close()
    },
    onConfirm (e) {
      this.$_showResult()
      Indicator.open({
        spinnerType: 'double-bounce'
      })
      bookModel.search(0, e)
        .then(res => {
          this.$_setMoreData(res.books)
          this.word = e
          this.$_setTotal(res.total)
          keyWordModel.addToHistory(e)
          Indicator.close()
          this.historyWords = keyWordModel.getHistory()
        })
    },
    $_setWords () {
      this.historyWords = keyWordModel.getHistory()
      keyWordModel.getHot()
        .then(res => {
          this.hotWords = res.hot
        })
    },
    $_showResult () {
      this.searching = true
      window.addEventListener('scroll', this.$_pullDownRefresh)
    },
    $_hideResult () {
      this.searching = false
      this.word = ''
      window.removeEventListener('scroll', this.$_pullDownRefresh)
    },
    $_setMoreData (dataArray) {
      const tempArray = this.dataArray.concat(dataArray)
      this.dataArray = tempArray
    },
    $_setTotal (total) {
      this.total = total
      if (total === 0) {
        this.noneResult = true
      }
    },
    $_hasMore () {
      if (this.dataArray.length >= this.total) {
        return false
      } else {
        return true
      }
    },
    $_getCurrentStart () {
      return this.dataArray.length
    },
    $_initialize () {
      this.total = null
      this.dataArray = []
      this.noneResult = false
      this.loading = false
    },
    $_pullDownRefresh () {
      let scrollTop = document.documentElement.scrollTop
      let offsetHeight = document.documentElement.offsetHeight
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollTop + offsetHeight === scrollHeight && this.$_hasMore()) {
        Indicator.open({
          spinnerType: 'double-bounce'
        })
        bookModel.search(this.$_getCurrentStart(), this.word)
          .then(res => {
            this.$_setMoreData(res.books)
            Indicator.close()
          })
      }
    }
  },
  mounted () {
    this.$_setWords()
  }
}
</script>

<style lang="stylus" scoped>
  .container
    display: flex
    flex-direction: column
    align-items: center
    width: 100%
    margin-top: 1.16rem
    .header
      background-color: #ffffff
      position: fixed
      height: 1rem
      border-top: 1px solid #f5f5f5
      border-bottom: 1px solid #f5f5f5
      display: flex
      flex-direction: row
      width: 7.5rem
      align-items: center
      color: #999
      z-index: 99
      .search-container
        display: inline-flex
        flex-direction: row
        align-items: center
        background-color: #f5f5f5
        border-radius: .5rem
        margin-left: .2rem
        .bar
          flex-direction: row
          justify-content: center
          align-items: center
          border-radius: .5rem
          background-color: #F7F7F7
          height: .68rem
          width: 4.8rem
          border-top-right-radius: .15rem
          border-bottom-right-radius: .15rem
          display: inline-flex
        .bar::-webkit-input-placeholder
          color: #999
        .iconfont
          margin-left: .24rem
          margin-right: .16rem
          font-size: .28rem
      .cancel
        line-height: .68rem
        width: 1.2rem
        text-align: center
        display: inline-block
        border: none
    .history
      width: 6.9rem
      margin: .4rem 0 .2rem 0
      display: flex
      font-size: .28rem
      margin-top: 1.6rem
      flex-direction: column
      .title
        line-height: .3rem
        display: flex
        flex-direction: row
        align-items: center
        color: #010101
        .chunk
          height: .3rem
          width: .1rem
          background-color: #000
          display: inline-block
          margin-right: .2rem
      .tags
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-top: .24rem
        padding-left: .3rem
        width: 6.3rem
        .tags-item
          margin-right: .35rem
    .hot-search
      margin-top: .7rem
    .books-container
      margin-top: 1rem
      display: flex
      flex-direction: row
      flex-wrap: wrap
      justify-content: space-between
      padding: 0 .9rem
      margin-bottom: .88rem
      .items
        margin-bottom: .1rem
    .empty-tip
      display: inline-block
      width: 100%
      text-align: center
      position: absolute
      top: 50%
</style>
